﻿<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>高理做题排名</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<link rel="stylesheet" href="css/style.css">

	<script>
		window.onload = function () {
			var url = "https://web-1253780623.cos.ap-shanghai.myqcloud.com/video_message/message.json"/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
			var request = new XMLHttpRequest();
			request.open("get", url);/*设置请求方法与路径*/
			request.send(null);/*不发送数据到服务器*/
			request.onload = function () {/*XHR对象获取到返回信息后执行*/
				var message = "";
				if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
					var json = JSON.parse(request.responseText);
					for(var i=0;i<json.length;i++){
						message = message + json[i].message + "<br/><br/>";
					}
					document.getElementById("message").innerHTML = message;
					//console.log(json);
				}
			}
		}
	</script>
</head>
<body>

<div class="lighthouse">
	<div class="light-ray"></div>
	<div class="roof-tip"></div>
	<div class="roof"></div>
	<div class="head">
		<div class="light"></div>
		<div class="shadow"></div>
	</div>
	<div class="top-rail"></div>
	<div class="upper-neck">
		<div class="shadow"></div>
	</div>
	<div class="bottom-rail"></div>
	<div class="lower-neck">
		<div class="shadow"></div>
	</div>
	<div class="stem">
		<div class="window1"></div>
		<div class="window2"></div>
		<div class="door"></div>
	    <div class="stem-texture"></div>
		<div class="shadow"></div>
	</div>
	<div class="base-top"></div>
	<div class="base-bottom">
		<div class="shadow"></div>
	</div>
</div>
<div style="border: #0C0C0C 5px; width: 30%; height: 40%;margin: 5% auto auto 20%; color: white;word-break: break-all; word-wrap: break-word;" id="message">
</div>
</body>
</html>